import React from 'react';
import moment from 'moment';
import PropTypes from 'prop-types';
import { DatePicker, Form, Select, ConfigProvider } from 'antd';
import cn from 'classnames';
import YearPicker from '@/components/YearPicker';
import Locale from '@/utils/locale';
import { isCurMonth } from '@/utils/utils';
import styles from './DateRange.less';
import DateTypes from './DateTypes';

const { locale } = new Locale('component.dateRange');

const { RangePicker, WeekPicker, MonthPicker } = DatePicker;
const { Option } = Select;

const DateRange = React.forwardRef(({ value = {}, dateTypes, onChange, toNow, range, allowClear, ...rest }, ref) => {
    const { className } = rest;
    const { type: dateType, quarter = 1 } = value;

    const handleDateTypeChange = type => {
        if (type.type === 'quarter') {
            onChange({
                range: [
                    moment()
                        .quarter(quarter || 1)
                        .startOf('quarter'),
                    moment()
                        .quarter(quarter || 1)
                        .endOf('quarter')
                ],
                type: type.type
            });
        } else if (type.type === 'year') {
            onChange({
                range: [moment().startOf('year'), moment().endOf('year')],
                type: type.type
            });
        } else if (type.type === 'month') {
            onChange({
                range: [moment().startOf('month'), moment().endOf('month')],
                type: type.type
            });
        } else if (type.type === 'week') {
            onChange({
                range: [moment().startOf('week'), moment().endOf('week')],
                type: type.type
            });
        }
    };
    const handleQuarterChange = index => {
        const quarters = moment(value.range[0].format('YYYY')).quarter(+index);
        onChange({
            range: [
                moment(quarters.startOf('quarter').format('YYYY-MM-DD')),
                moment(quarters.endOf('quarter').format('YYYY-MM-DD'))
            ],
            type: dateType,
            quarter: +index
        });
    };

    React.useEffect(() => {
        if (quarter && dateType === 'quarter') {
            handleQuarterChange(quarter);
        }
    }, [quarter, dateType]);
    const getPicker = () => {
        if (range) {
            return (
                <RangePicker
                    allowClear={allowClear}
                    value={value.range}
                    onChange={date => {
                        onChange({
                            range: date,
                            type: dateType
                        });
                    }}
                />
            );
        }
        if (dateType === 'quarter') {
            return (
                <YearPicker
                    allowClear={allowClear}
                    value={moment(value.range[0].format('YYYY'))}
                    onChange={date => {
                        onChange({
                            range: [
                                moment(date)
                                    .quarter(quarter)
                                    .startOf('quarter'),
                                moment(date)
                                    .quarter(quarter)
                                    .endOf('quarter')
                            ],
                            type: dateType
                        });
                    }}
                />
            );
        }
        if (dateType === 'year') {
            return (
                <YearPicker
                    allowClear={allowClear}
                    value={moment(value.range[0].format('YYYY'))}
                    onChange={year =>
                        onChange({
                            range: [moment(year).startOf('year'), moment(year).endOf('year')],
                            type: dateType
                        })
                    }
                />
            );
        }
        if (dateType === 'month') {
            return (
                <MonthPicker
                    allowClear={allowClear}
                    value={moment(value.range[0].format('YYYY-MM'))}
                    onChange={date => {
                        if (isCurMonth(date) && toNow) {
                            onChange({
                                range: [moment(date).startOf('month'), moment()],
                                type: dateType
                            });
                        } else {
                            onChange({
                                range: [moment(date).startOf('month'), moment(date).endOf('month')],
                                type: dateType
                            });
                        }
                    }}
                />
            );
        }
        if (dateType === 'week') {
            return (
                <WeekPicker
                    allowClear={allowClear}
                    value={value.range[0]}
                    onChange={date => {
                        onChange({
                            range: [moment(date).startOf('week'), moment(date).endOf('week')],
                            type: dateType
                        });
                    }}
                />
            );
        }
        return null;
    };
    return (
        <div className={cn(styles.uiDataPick, className)} ref={ref}>
            <ConfigProvider getPopupContainer={node => node.parentNode}>
                <DateTypes types={dateTypes} value={dateType} onChange={handleDateTypeChange} />
                <Form.Item style={{ marginRight: 0 }}>{getPicker()}</Form.Item>
                {dateType === 'quarter' && (
                    <Form.Item style={{ marginLeft: 15 }}>
                        <Select value={quarter} onChange={handleQuarterChange} getPopupContainer={() => document.body}>
                            {[locale('square.1'), locale('square.2'), locale('square.3'), locale('square.4')].map(
                                (item, index) => (
                                    <Option key={item} value={index + 1}>
                                        {item}
                                    </Option>
                                )
                            )}
                        </Select>
                    </Form.Item>
                )}
            </ConfigProvider>
        </div>
    );
});

DateRange.propTypes = {
    dateTypes: PropTypes.array,
    type: PropTypes.string,
    range: PropTypes.bool,
    toNow: PropTypes.bool,
    allowClear: PropTypes.bool
};

DateRange.defaultProps = {
    type: 'year',
    range: false,
    toNow: true,
    allowClear: false,
    dateTypes: [
        {
            label: locale('week'),
            type: 'week'
        },
        {
            label: locale('month'),
            type: 'month'
        },
        {
            label: locale('square'),
            type: 'quarter'
        },
        {
            label: locale('year'),
            type: 'year'
        }
    ]
};

export default DateRange;
